<template>
	<div class="containers">
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion" size="mini">添加</el-button>
			</div>

			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" border size="mini" :height="$tableHight"
				@selection-change="handleSelectionChange" v-loading="loading">
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>

				<el-table-column prop="type_name" label="规格名称"></el-table-column>
				<el-table-column  label="规格值">
					<template slot-scope="scope" style="display: flex;">
						<div class="tagboxs">
							<div class="tagbox" v-for=" item in scope.row.type_attr"  :key="item.ID">
								<el-tag size="mini" style="margin-right: 10px;" :type="'success'"  @click="handleEdit(item)">{{item.val}}</el-tag>
								<div class="trdelete" @click="handleDelete(item)">X</div>
							</div>
					</div>


					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog :title="type?'编辑':'添加'" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="规格名称"><el-input v-model="form.property_attr"></el-input></el-form-item>
				<el-form-item label="规格值"><el-input v-model="form.property_vals" placeholder="多个值','隔开"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑弹出框 -->
		<el-dialog :title="type?'编辑':'添加'" :visible.sync="editVisibles" width="30%">
			<el-form ref="putdata" :model="putdata" label-width="70px">
				<el-form-item label="规格名称"><el-input v-model="putdata.attr"></el-input></el-form-item>
				<el-form-item label="规格值"><el-input v-model="putdata.val" placeholder="多个值','隔开"></el-input></el-form-item>
				<el-form-item label="排序"><el-input v-model="putdata.sort"></el-input></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'basetable',
	data() {
		return {
			form: {
				property_attr:'',
        property_vals:''
			},
			query: {
				pageIndex: 1,
				 pageSize: 20
			},
			code:0,
			upload:'',
			tableData: [],
			multipleSelection: [],
			editVisible: false,
			editVisibles:false,
			pageTotal: 0,
			imageUrl: '',
			type:0,
			putdata:{},
			loading:false
		};
	},
	created() {
		this.getData()
	},
	methods: {
		//获取数据
		getData() {
      	this.loading=true
			this.request('business/add_attribute/', 'get', { page: this.query.pageIndex, size: this.query.pageSize}).then(res => {
				console.log(res.data)
      	this.loading=false
				let arr=[]
				res.data.forEach(item=>{
					item.type_attr.forEach(items=>{
						arr.push({
							attr:item.type_name,
							val:items.val,
							ID:items.ID,
							sort:items.sort
						})
					})

				})
				this.tableData=res.data
			})
		},
		// 编辑
		handleEdit(e) {
			console.log(e)
			this.editVisibles = true;
			this.putdata = e;
			this.imageUrl = e.img;
			this.type=1
		},
		cancel() {
			this.editVisible = false;
			this.editVisibles = false;
			this.form = {
				property_attr:'',
        property_vals:''
			};
			this.getData();
		},
		// 修改排序
		operations(e, code) {
			console.log(e)
			e.sort=Number(e.sort)
			console.log(e)
			this.request('business/add_attribute/', 'put',e).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.getData()
				} else {
					this.$message.error(res.errmsg);
				}
			});
			this.editVisible = false;
			this.getData();
		},
		// 删除操作
		handleDelete(row) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.request('business/add_attribute/', 'delete', { ID: row.ID }).then(res => {
						if (res.errno == 0) {
							this.$message.success(res.errmsg);
							// this.tableData.splice(index, 1)
							this.getData()
						} else {
							this.$message.error(res.errmsg);
						}
					});
				})
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 添加
		addregion() {
			this.form = {
				property_attr:'',
        property_vals:''
			};
			this.type=0
			this.imageUrl = '';
			this.editVisible = true;
		},

		// 添加/修改
		saveEdit() {
			if(this.type){
				this.putdata.sort=Number(this.putdata.sort)
			}else{
				this.form.property_vals=this.form.property_vals.split(',')
				if (!this.form.property_attr) return this.$message.error('请输入规格名称');
				if (!this.form.property_vals.length) return this.$message.error('请输入规格值');
			}

			// let data
			// if(this.type){
			// 	data ={
			// 		attr:this.form.property_attr,
			// 		val:this.form.property_vals
			// 	}
			// }
			this.request('business/add_attribute/', this.type?'put':'post', this.type?this.putdata:this.form).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.form = {
            property_attr:'',
            property_vals:''
          };
					this.putdata={}
				} else {
					this.$message.error(res.errmsg);
				}
				this.getData();
			});
			this.editVisible = false;
			this.editVisibles = false;

		},
		// 分页导航
		handlePageChange(val) {
			this.$set(this.query, 'pageIndex', val);
			this.getData();
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	padding: 20px;
}
.el-upload--text {
	width: 200px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;

	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	/* width: 100px; */
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100%;
	height: 178px;
	display: block;
}

.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 60px;
	height: 60px;
	.el-image img{
		object-fit: cover;
	}
}
/* 设置分页按钮样式 */
.pagination{
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
.tagboxs{
	display: flex;
	.tagbox{
		position: relative;
		cursor:pointer;
		padding-top: 10px;
	}
	.tagbox:hover{
		.trdelete{
			display: block;
		}
	}
	.trdelete{
		display: none;
		color: #ff0000;
		position: absolute;
		right: 0;
		top:0;
	}
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
